<template>
<onekit-page>
<onekit-view onekit-class="container">
	<div is="onekit-template-head" :DATA="`${JSON.stringify({title:'input'})}`"></div>
	<onekit-view onekit-class="page-body">
		<onekit-view onekit-class="page-section">
			<onekit-view onekit-class="weui-cells__title">可以自动聚焦的input</onekit-view>
			<onekit-view onekit-class="weui-cells weui-cells_after-title">
				<onekit-view onekit-class="weui-cell weui-cell_input">
					<onekit-input onekit-class="weui-input" auto-focus placeholder="将会获取焦点"></onekit-input>
				</onekit-view>
			</onekit-view>
		</onekit-view>
		<onekit-view onekit-class="page-section">
			<onekit-view onekit-class="weui-cells__title">控制最大输入长度的input</onekit-view>
			<onekit-view onekit-class="weui-cells weui-cells_after-title">
				<onekit-view onekit-class="weui-cell weui-cell_input">
					<onekit-input onekit-class="weui-input" maxlength="10" placeholder="最大输入长度为10"></onekit-input>
				</onekit-view>
			</onekit-view>
		</onekit-view>
		<onekit-view onekit-class="page-section">
			<onekit-view onekit-class="weui-cells__title">实时获取输入值：{{inputValue}}</onekit-view>
			<onekit-view onekit-class="weui-cells weui-cells_after-title">
				<onekit-view onekit-class="weui-cell weui-cell_input">
					<onekit-input onekit-class="weui-input" maxlength="10" placeholder="输入同步到view中" @Input="bindKeyInput"></onekit-input>
				</onekit-view>
			</onekit-view>
		</onekit-view>
		<onekit-view onekit-class="page-section">
			<onekit-view onekit-class="weui-cells__title">控制输入的input</onekit-view>
			<onekit-view onekit-class="weui-cells weui-cells_after-title">
				<onekit-view onekit-class="weui-cell weui-cell_input">
					<onekit-input onekit-class="weui-input" placeholder="连续的两个1会变成2" @Input="bindReplaceInput"></onekit-input>
				</onekit-view>
			</onekit-view>
		</onekit-view>
		<onekit-view onekit-class="page-section">
			<onekit-view onekit-class="weui-cells__title">控制键盘的input</onekit-view>
			<onekit-view onekit-class="weui-cells weui-cells_after-title">
				<onekit-view onekit-class="weui-cell weui-cell_input">
					<onekit-input onekit-class="weui-input" placeholder="输入123自动收起键盘" @Input="bindHideKeyboard"></onekit-input>
				</onekit-view>
			</onekit-view>
		</onekit-view>
		<onekit-view onekit-class="page-section">
			<onekit-view onekit-class="weui-cells__title">数字输入的input</onekit-view>
			<onekit-view onekit-class="weui-cells weui-cells_after-title">
				<onekit-view onekit-class="weui-cell weui-cell_input">
					<onekit-input onekit-class="weui-input" type="number" placeholder="这是一个数字输入框"></onekit-input>
				</onekit-view>
			</onekit-view>
		</onekit-view>
		<onekit-view onekit-class="page-section">
			<onekit-view onekit-class="weui-cells__title">密码输入的input</onekit-view>
			<onekit-view onekit-class="weui-cells weui-cells_after-title">
				<onekit-view onekit-class="weui-cell weui-cell_input">
					<onekit-input onekit-class="weui-input" password type="text" placeholder="这是一个密码输入框"></onekit-input>
				</onekit-view>
			</onekit-view>
		</onekit-view>
		<onekit-view onekit-class="page-section">
			<onekit-view onekit-class="weui-cells__title">带小数点的input</onekit-view>
			<onekit-view onekit-class="weui-cells weui-cells_after-title">
				<onekit-view onekit-class="weui-cell weui-cell_input">
					<onekit-input onekit-class="weui-input" type="digit" placeholder="带小数点的数字键盘"></onekit-input>
				</onekit-view>
			</onekit-view>
		</onekit-view>
		<onekit-view onekit-class="page-section">
			<onekit-view onekit-class="weui-cells__title">身份证输入的input</onekit-view>
			<onekit-view onekit-class="weui-cells weui-cells_after-title">
				<onekit-view onekit-class="weui-cell weui-cell_input">
					<onekit-input onekit-class="weui-input" type="idcard" placeholder="身份证输入键盘"></onekit-input>
				</onekit-view>
			</onekit-view>
		</onekit-view>
		<onekit-view onekit-class="page-section">
			<onekit-view onekit-class="weui-cells__title">控制占位符颜色的input</onekit-view>
			<onekit-view onekit-class="weui-cells weui-cells_after-title">
				<onekit-view onekit-class="weui-cell weui-cell_input">
					<onekit-input onekit-class="weui-input" placeholder-style="color:#F76260" placeholder="占位符字体是红色的"></onekit-input>
				</onekit-view>
			</onekit-view>
		</onekit-view>
	</onekit-view>
	<div is="onekit-template-foot"></div>
</onekit-view>
</onekit-page></template>
<script>
/* eslint-disable */
import Vue from 'vue';
import onekit_template_0 from '../../../../page/common/head.head.vue';Vue.component('onekit-template-head',onekit_template_0);
import onekit_template_1 from '../../../../page/common/foot.foot.vue';Vue.component('onekit-template-foot',onekit_template_1);
const ONEKIT_JSON= {
  "navigationBarTitleText": "input",
  "usingComponents": {
    
  }
};
const ONEKIT_SJS = {
};
import wx from '../../../../../weixin2vue/wx.js';
import Macro from '../../../../../weixin2vue/Macro.js';
const {getApp,getCurrentPages} = Macro;
import Page from '../../../../../weixin2vue/OnekitPage.js';
import Component from '../../../../../weixin2vue/OnekitComponent.js';
export default Page(ONEKIT_JSON,["实时获取输入值：","inputValue"],ONEKIT_SJS,{
    "onShareAppMessage"(){
      return {
        "title":'input',
        "path":'page/component/pages/input/input'
};
    },
    "data":{
        "focus":false,
        "inputValue":''
},
    "bindKeyInput"(e){
      this.setData({
        "inputValue":e.detail.value
});
    },
    "bindReplaceInput"(e){
      const value = e.detail.value;
      let pos = e.detail.cursor;
      let left;
      if(pos !== -1)
      {
        left = e.detail.value.slice(0,pos);
        pos = left.replace(/11/g,'2').length;
      };
      return {
        "value":value.replace(/11/g,'2'),
        "cursor":pos
};
    },
    "bindHideKeyboard"(e){
      if(e.detail.value == '123')
      {
        wx.hideKeyboard();
      };
    }
});

</script>
<style 
 lang="css">
@import '/page/common/lib/weui.css';
.page-section {
  margin-bottom: 10px ;
}
</style>